<template>
    <FormItem :name="item.key" :label="item.label">
        <Input :placeholder="item.placeholder ? item.placeholder : '请输入'"
               v-if="item.type === 'input'" :value="model[item.key]"
               :disabled="item.disabled ? item.disabled : false"
               @change="setValue($event.target.value, item.key)"
               :maxlength="item.maxLength ? item.maxLength : 200" />
        <InputPassword
                :placeholder="item.placeholder ? item.placeholder : '请输入'"
                v-if="item.type === 'inputPassword'" :value="model[item.key]"
                @change="setValue($event.target.value, item.key)"
                :maxlength="item.maxLength ? item.maxLength : 200"
        />
        <InputNumber :placeholder="item.placeholder ? item.placeholder : '请输入'"
               v-if="item.type === 'inputNumber'" :value="model[item.key]"
               @change="setValue($event, item.key)"
               :maxlength="item.maxLength ? item.maxLength : 200" />
        <RadioGroup
                v-if="item.type === 'radio'"
                :value="model[item.key]"  @change="setValue($event.target.value, item.key)">
            <Radio v-for="(child, childIndex) in item.data"
                   :key="childIndex"
                   :value="child.value">
                {{child.label}}
            </Radio>
        </RadioGroup>
        <Switch
                v-if="item.type === 'switch'"
                :checked="model[item.key]"
                :checked-children="item.on ? item.on : '开'"
                :un-checked-children="item.off ? item.off : '关'"
                @change="setValue($event, item.key)"
        />
        <DatePicker
                v-if="item.type === 'datePicker'"
                :placeholder="item.placeholder ? item.placeholder : '请选择日期'"
                :value="model[key]"
                :picker="item.picker ? item.picker : ''"
                @change="setValue($event, item.key)"
                :format="item.format ? item.format : 'YYYY-MM-DD'"
        />
        <RangePicker
                v-if="item.type === 'rangePicker'"
                :placeholder="['开始时间', '结束时间']"
                :value="model[key]"
                :show-time="item.showTime ?item.showTime : false"
                :picker="item.picker ? item.picker : ''"
                @change="setValue($event, item.key)"
                :format="item.format ? item.format : 'YYYY-MM-DD'"
        />
        <Select
                v-if="item.type === 'select'"
                :placeholder="item.placeholder ? item.placeholder : '请选择'"
                :mode="item.multiple ? 'multiple' : ''"
                :value="model[item.key] ? model[item.key] : undefined"
                @change="setValue($event, item.key)">
            <SelectOption v-for="(child, childIndex) in item.data"
                          :key="childIndex"
                          :value="child.value">
                {{child.label}}
            </SelectOption>
        </Select>
        <TreeSelect v-if="item.type === 'treeSelect'"
                    :placeholder="item.placeholder ? item.placeholder : '请选择'"
                    :tree-checkable="item.multiple ? true : false"
                    :value="model[item.key] ? model[item.key] : undefined"
                    :treeData="item.data"
                    @change="setValue($event, item.key)"
        />
        <Input :placeholder="item.placeholder ? item.placeholder : '请输入'"
               v-if="item.type === 'color'" type="color" :value="model[item.key]"
               @change="setValue($event.target.value, item.key)"
               :maxlength="item.maxLength ? item.maxLength : 200" />
        <Textarea v-if="item.type == 'textarea'" :value="model[item.key]"
            :placeholder="item.placeholder ? item.placeholder : '请输入'"
            @change="setValue($event.target.value, item.key)"
            :maxlength="item.maxLength ? item.maxLength : 200"
        />
        <div v-if="item.type === 'upload'">
            <Button type="primary" @click="clickUpload()" ghost>
                <input type="file" style="display: none;" ref="file"  @change="handleFileChange($event, item.fileTypes, item.key)"/>
                <UploadOutlined />
                上传
            </Button>
            <div v-for="file in (index, files)" :key="index">
                <div class="fileName">{{file.fileName}}</div>
                <Progress :percent="file.percent" status="active" />
            </div>
        </div>
    </FormItem>
</template>
<script>
    import {
        Input,
        InputPassword,
        TreeSelect,
        Select,
        SelectOption,
        FormItem,
        InputNumber,
        RadioGroup,
        Radio,
        Switch,
        DatePicker,
        RangePicker,
        Button,
        message,
        Progress,
        Textarea
    } from "ant-design-vue";
    import { UploadOutlined } from '@ant-design/icons-vue';
    import {Minio} from 'minio-js'
    import axios from "axios";
    import ApkParser from "app-info-parser";
    export default {
        name: 'group',
        components: {
            Input,
            Select,
            TreeSelect,
            SelectOption,
            FormItem,
            InputNumber,
            RadioGroup,
            Radio,
            Switch,
            DatePicker,
            RangePicker,
            InputPassword,
            UploadOutlined,
            Button,
            message,
            Progress,
            Textarea
        },
        props: {
            item: {
                type: Object,
                default: {}
            },
            model: {
                type: Object,
                default: {}
            }
        },
        data(){
            return {
                minioClient: null,
                files: [],
            }
        },
        methods: {
            setValue(val, key){
                this.model[key] = val;
            },
            clickUpload(){
                this.$refs.file.click();
            },
            handleFileChange(event, fileTypes = [], key){
                const file = event.target.files[0];
                if(fileTypes.length > 0 && !fileTypes.includes(file.type)){
                    this.$refs.file.value = "";
                    message.error('文件类型不正确');
                    return;
                }
                this.minioClient = new Minio.Client({
                    endPoint: '192.168.202.52',
                    port: 19000,
                    useSSL: false,
                    accessKey: 'minioadmin',
                    secretKey: 'minioadmin'
                });
                const suffix = file.name.match(/\.(.+)$/)[1];
                let parser = null;
                if(suffix === 'apk'){
                    parser = new ApkParser(file);
                }
                const fileName = new Date().getTime() + "." + suffix;
                this.uploadFileWithProgress(suffix === 'apk' ? 'apk-prod' : 'images-prod',fileName, file, key, parser);
            },

            /**
             * 上传
             * @param bucketName 
             * @param objectName 
             * @param file 
             */
            async uploadFileWithProgress(bucketName, objectName, file, key, parser){
                let that = this;
                this.files.push({fileName: file.name, targetFileName: objectName, percent: 0});
                this.minioClient.presignedPutObject(bucketName, objectName, 1000 * 60, (err, url) => {
                    if(err){
                        return console.error(err);
                    };
                    axios(url, {
                        method: 'PUT',
                        data: file,
                        timeout: 1800000,
                        headers: {
                            'Content-Type': 'application/octet-stream'
                        },
                        onUploadProgress: (progressEvent) =>{
                            const {loaded, total} = progressEvent;
                            const percent = Math.round((loaded * 100) / total);
                            that.files[that.files.length - 1].percent = percent;
                            if(percent == 100){
                                that.$refs.file.value = "";
                                that.model[key] = that.files;
                                if(parser){
                                    parser.parse().then((result) => {
                                        that.$emit('uploadSuccess', {files: that.files, apkInfo: result});
                                    })
                                }else{
                                    that.$emit('uploadSuccess', that.files);
                                }
                            }
                        }
                    });
                });
            }
        }
    }
</script>
<style scoped lang="scss">
    .ant-input-number{
        width: 100% !important;
    }
    .ant-picker{
        width: 100%;
    }
    .fileName{
        height: 30px;
        line-height: 30px;
    }
</style>
